<!-- 原始数据成像 -->
<template>
  <div class="dataImg">
    <div class="form-container">
      <el-form label-width="150" size="default" :model="form" ref="dataImgFormRef" :rules="dataImgRules"
        hide-required-asterisk label-position="right" class="form">
        <el-form-item label="原始数据路径" prop="oriData">
          <el-input v-model="form.oriData" placeholder="请选择" @click="chooseOriData">
            <template v-slot:suffix>
              <img @click="chooseOriData" class="folder-icon" :src="folderOpen" alt="" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="算法文件" prop="imgMethod">
          <el-input v-model="form.sfFile" placeholder="请选择" @click="chooseSFFile">
            <template v-slot:suffix>
              <img @click="chooseSFFile" class="folder-icon" :src="folderOpen" alt="" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="导出目录" prop="expDir">
          <el-input v-model="form.expDir" placeholder="请选择" @click="chooseExpDir">
            <template v-slot:suffix>
              <img @click="chooseExpDir" class="folder-icon" :src="folderOpen" alt="" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="common-btn1" @click="onSubmit(dataImgFormRef)">处理</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import folderOpen from '../assets/svg/folder-open.svg'
const dataImgFormRef = ref();
//防止多次点击多次弹窗
const oriDataClick = ref(false);
const sfFileClick = ref(false);
const expDirClick = ref(false);
const dataImgRules = reactive({
  oriData: [{ required: true, message: "请选择原始数据", trigger: "change" }],
  expDir: [{ required: true, message: "请选择导出目录", trigger: "change" }],
});

//数据成像表单参数
const form = reactive({
  oriData: "", //原始数据
  sfFile: "", //算法文件
  expDir: "", //导出目录
});
//选择原始数据路径
const chooseOriData = () => {
  if (oriDataClick.value) return
  oriDataClick.value = true
  window.electron.ipcRenderer.send("get-folder-path");
  window.api.getPath((_event, value) => {
    oriDataClick.value = false
    form.oriData = value;
    window.api.removeGetPath();
  });
};
//选择算法文件路径

const chooseSFFile = () => {
  if (sfFileClick.value) return
  sfFileClick.value = true
  window.electron.ipcRenderer.send("get-file-path");
  window.api.getFilePath((_event, value) => {
    sfFileClick.value = false
    form.sfFile = value;
    window.api.removeGetFilePath();
  });
};
//选择导出路径
const chooseExpDir = () => {
  if (expDirClick.value) return
  expDirClick.value = true
  window.electron.ipcRenderer.send("get-folder-path");
  window.api.getPath((_event, value) => {
    expDirClick.value = false
    form.expDir = value;
    window.api.removeGetPath();
  });
};

//处理
const onSubmit = (FormEL) => {

  if (!FormEL) return;
  FormEL.validate(async (valid, fields) => {
    if (valid) {
      try {
        console.log(form.oriData);
        console.log(form.sfFile);
        console.log(form.expDir);
        let filePath = form.sfFile
        let args = [form.oriData, form.expDir]
        window.electron.ipcRenderer.send("execute-exe", { filePath, args });
      } catch (error) {
        console.error('出现错误:', error);
      }
    } else {
      ElMessage.info({
        message: "请补全参数！",
        type: "info",
        duration: 2000,
      });
    }
  });
};
onMounted(() => {
  console.log(window.electron, '1231312');
  console.log(window.electron.ipcRenderer);
})
</script>

<style scoped>
.dataImg {
  width: 100vw;
  height: 100vh;
  background: url("@/assets/img/loginForm_bg.png");
  background-size: 100% 100%;
  object-fit: cover;
}

.form-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
